<template>
    <div style="width: 100%; height: 590px">
        <a-carousel arrows style="width: 1000px" autoplay>
            <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                    <left-circle-outlined />
                </div>
            </template>
            <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                    <right-circle-outlined />
                </div>
            </template>
            <div v-for="(item, index) in imgList" :key="index">
                <img
                    style="width: 100%; height: 100%"
                    :src="item.imageUrl"
                    :alt="`产地:${item.countyName}  产品名:${item.productName}`"
                    :title="`产地:${item.countyName}  产品名:${item.productName}`"
                />
            </div>
        </a-carousel>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'

import { ProductionImg } from '../../store'
import type { ItemResponse } from './type'

export default defineComponent({
    name: 'CenterBar',
    components: {
        LeftCircleOutlined,
        RightCircleOutlined
    },
    setup() {
        const constant = {}
        const state = reactive({
            imgList: [] as ItemResponse[]
        })
        onMounted(async () => {
            const { result } = await ProductionImg()
            state.imgList = result
        })

        return {
            ...toRefs(state),
            ...constant
        }
    }
})
</script>
<style scoped>
:deep(.slick-slide) {
    text-align: center;
    width: 100%;
    height: 588px;
    background: #364d79;
    overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    transition: ease all 0.3s;
    opacity: 0.3;
    z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
    display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
    color: #fff;
    opacity: 0.5;
}

:deep(.slick-slide h3) {
    color: #fff;
}
</style>
